<template>
    <div class="main">
        <div class="filter-box">
            <div class="filter-left">
                <el-input
                    v-model.trim="condition.value"
                    maxlength="20"
                    style="width: 300px"
                    size="mini"
                    placeholder="请输入告警内容"
                ></el-input>
                <el-select v-model="condition.employType" size="mini" placeholder="请选择资源类型" clearable>
                    <el-option label="资产" :value="0"></el-option>
                    <el-option label="人员" :value="1"></el-option>
                </el-select>
                <el-select v-model="condition.type" size="mini" placeholder="请选择告警类型" clearable>
                    <el-option label="标签" :value="0"></el-option>
                    <el-option label="栅栏" :value="1"></el-option>
                </el-select>
                <el-button type="primary" size="mini" icon="el-icon-search" :disabled="loading" @click="handleSearch">
                    查询
                </el-button>
                <el-button type="primary" size="mini" icon="el-icon-refresh-right" @click="handleReset">重置</el-button>
            </div>
        </div>
        <!-- 表格 -->
        <el-table
            v-loading="loading"
            stripe
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            height="100%"
            :data="tableData"
            tooltip-effect="dark"
            align="center"
        >

          <el-table-column label="告警类别" prop="fullName" min-width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.type == 0 ? '标签离线告警' : '栅栏告警' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="首次告警时间" prop="faultTime" min-width="200" show-overflow-tooltip></el-table-column>
          <el-table-column label="最近告警时间" prop="latelyTime" min-width="200" show-overflow-tooltip></el-table-column>
          <el-table-column label="关联资产/员工" prop="employName" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column label="关联标签" prop="name" min-width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="所属区域" prop="employRegionName" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column label="所属部门" prop="employDeptName" min-width="160" show-overflow-tooltip></el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="page-block">
            <el-pagination @current-change="handleCurrentChange" :current-page="pageNo" :page-size="pageSize"
                           layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { getAlarmPage } from '@/api/alarm'

export default {
    data() {
        return {
            condition: {
                value: '',
                type: '',
                employType: '',
                flag: true
            },
            value: '',
            tableData: [],
            loading: true,
            pageSize: 15,
            pageNo: 1,
            total: 0
        }
    },
    created() {
        this.getData()
    },
    methods: {
        //获取数据
        getData() {
            this.loading = true
            let obj = {
                pageSize: this.pageSize,
                pageNo: this.pageNo,
                ...this.condition
            }
            getAlarmPage(obj)
                .then((res) => {
                    this.loading = false
                    if (res.status != 200) {
                        this.$msgPrompt.error(res.msg)
                        this.pageNo = 1
                        this.tableData = []
                        this.total = 0
                        return
                    }
                    this.tableData = res.obj.records
                    this.total = res.obj.total
                })
                .catch((error) => {
                    this.loading = false
                })
        },
        //查询
        handleSearch() {
            this.pageNo = 1
            this.getData()
        },
        //重置
        handleReset() {
            for (let key in this.condition) {
              if (key !== 'flag') {
                this.condition[key] = ''
              }
            }
        },
        //页码点击 初始页pageNo、初始每页数据数pageSize和数据data
        handleCurrentChange(pageNo) {
            this.pageNo = pageNo
            this.getData()
        }
    }
}
</script>
<style scoped lang="scss">
.main {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 10px 0 10px;

    .el-select {
        width: 200px;
    }
}
</style>
